<template>
  <header class="search">
    <el-input v-model="searchInput" @clear="onReset" placeholder="请输入名称查询" />
    <el-button type="primary" @click="onSearch">查询</el-button>
  </header>
  <main class="list">
    <Empty v-if="!list.length" />
    <template v-else>
      <ul class="list-main">
        <li class="list-main-item list-item" :class="{ active: item.id == currItem.id }" v-for="item, index in list" :key="index" @click="onClickItem(item)">
          <!-- <el-avatar shape="square" :size="50" src="https://hbimg.huaban.com/1aeebdb8062fbb186cc0eba481e676a6213d351f27db-Ok4q30" /> -->
          <section class="list-item-icon">
            <IconPoliceCar :size="28" />
          </section>
          <section class="list-item-info">
            <header class="list-item-info-title">
              <h5 class="list-item-info-title-text" :title="`名称: ${item.mc} 编号: ${item.bh}`">{{ item.mc }}</h5>
              <el-tag v-if="item.zt == SECURITY_STATUS['启用']" type="primary" size="small" title="点击切换" @click="onChangeStatus(1)">启用</el-tag>
              <el-tag v-else-if="item.zt == SECURITY_STATUS['禁用']" type="danger" size="small" title="点击切换" @click="onChangeStatus(0)">禁用</el-tag>
              <el-tag v-else type="danger" size="small">状态异常</el-tag>
            </header>
            <p class="list-item-info-sub" :title="item.ms">{{ item.ms }}</p>
          </section>
          <section class="list-item-action">
            <el-button link type="primary" :icon="Plus" title="新增子级" @click="onChildAdd" />
            <el-button link type="warning" :icon="Edit" title="编辑此项" @click="onEdit(item)" />
            <el-popconfirm title="确认删除吗？" @confirm="onDelete(item)">
              <template #reference>
                <el-button link type="danger" :icon="Delete" title="删除此项" />
              </template>
            </el-popconfirm>
          </section>
        </li>
      </ul>
      <el-pagination
        class="list-pagination"
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        background
        size="small"
        :pager-count="5"
        layout="total, prev, pager, next"
        :total="pagination.total"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      />
    </template>
    <AsideFormDialog ref="asideFormDialogRef" :name="currSideBar" @submited="onSearch" />
    <TableFormDialog ref="tableFormDialogRef" :name="currItem.mc" @submited="onSearch(false)" />
  </main>
</template>

<script setup>
import { ref, reactive, onMounted, useTemplateRef } from 'vue'
import { securityApi } from '@/api/systemSetting'
import IconEdit from '@/components/icons/IconEdit'
import IconPoliceCar from '@/components/icons/IconPoliceCar'
import { Plus, Edit, Delete } from '@element-plus/icons-vue'
import { SECURITY_STATUS } from '@/views/SystemSetting/config'
import { ElMessage } from 'element-plus'
import TableFormDialog from './TableFormDialog.vue';
import AsideFormDialog from './AsideFormDialog.vue';

const emits = defineEmits(['clickItem'])
const props = defineProps({
  currSideBar: {
    type: String,
    required: true,
  },
})

onMounted(() => {
  onSearch();
})

const asideFormDialogRef = useTemplateRef('asideFormDialogRef')
const tableFormDialogRef = useTemplateRef('tableFormDialogRef')
const currItem = reactive({});
const searchInput = ref('');
const list = ref([]);
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

const onAdd = () => {
  asideFormDialogRef.value.show('add');
}

const onChildAdd = () => {
  tableFormDialogRef.value.show('add');
}

const onEdit = item => {
  asideFormDialogRef.value.show('edit', item);
}

const onDelete = item => {
  console.log('onDelete', item);
}

const onClickItem = (item) => {
  Object.assign(currItem, item);
  emits('clickItem', item);
}

const onChangeStatus = type => {
  let status;
  if (type == SECURITY_STATUS['启用']) status = SECURITY_STATUS['禁用'];
  else status = SECURITY_STATUS['启用'];
  ElMessage.success('状态切换成功')
}

const onSearch = defaultCheckFirstItem => {
  pagination.currentPage = 1;
  getList(defaultCheckFirstItem);
}

const onReset = () => {
  searchInput.value = '';
  onSearch();
}

const getList = async (defaultCheckFirstItem = true) => {
  console.log('getAsideList');
  try {
    const res = await securityApi.asideList({});
    list.value = res.data.records;
    pagination.total = res.data.total;
    defaultCheckFirstItem && onClickItem(res.data.records[0]);
  } catch (error) {
    console.error(error);
  }
}

const onSizeChange = value => {
  pagination.currentPage = 1;
  pagination.pageSize = value;
  getList();
}

const onCurrentChange = value => {
  pagination.currentPage = value;
  getList();
}

defineExpose({ onAdd })
</script>

<style lang="scss" scoped>
@use '@/styles/components/tablePage.scss';

.list-item {
  display: flex;
  align-items: center;

  &-icon {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 48px;
    width: 48px;
    border-radius: var(--el-border-radius-base);
    background-color: var(--el-color-primary-light-9);

    svg {
      fill: var(--el-color-primary);
    }
  }

  &-info {
    flex: 1;
    overflow: hidden;
    margin-left: var(--ycy-gap-base);
    margin-right: var(--ycy-gap-base);
    
    &-title {
      display: flex;
      align-items: center;
      margin-bottom: var(--ycy-gap-small / 2);

      &-text {
        font-weight: bold;
        font-size: var(--el-font-size-medium);
        margin-right: var(--ycy-gap-small);
      }
    }

    &-sub {
      color: var(--el-text-color-secondary);
      font-size: var(--el-font-size-small);
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }

  &-action {
    .el-button {
      font-size: var(--el-font-size-medium);
    }

    .el-button + .el-button {
      margin-left: var(--ycy-gap-small);
    }
  }
}
</style>